<template>
  <div class="sendFeedBack">
    <header>
      <h2 class="title">Feedback</h2>
      <span
        @click="toPage('myFeedback')"
        class="record"
        :class="{ dot: feedbackNum }"
        >Record>></span
      >
    </header>
    <div class="main">
      <div class="feedback-text">
        <el-input
          type="textarea"
          :autosize="{ minRows: 10, maxRows: 12 }"
          placeholder="What problems do you encounter? Please give feedback here and we will deal with them as soon as possible."
          v-model="params.feedbackContent"
        >
        </el-input>
      </div>
      <div class="feedback-email">
        <el-input
          placeholder="Write your email address here."
          type="email"
          v-model="params.email"
        ></el-input>
      </div>
      <a
        class="toFacebookPage"
        :href="url"
        target="_blank"
        rel="noopener noreferrer"
        >Give us screensho feedback on Facebook >
      </a>
      <el-button @click="sendFeedBack" class="submit" :disabled="disabledSubmit"
        >Submit</el-button
      >
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      params: {
        feedbackContent: "", //反馈内容
        email: "",
      },
      feedbackNum: 0, //未读反馈数量
      url: "https://www.facebook.com/FishNovel-246415817262219", //Facebook的公共主页
    };
  },
  components: {},
  computed: {
    ...mapGetters([""]),
    //禁用Submit按钮
    disabledSubmit() {
      if (this.checkSpecialKey(this.params.feedbackContent)) {
        return false;
      } else {
        return true;
      }
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getNoReadFeedbackCount();
  },
  methods: {
    ...mapMutations({
      // setShowPopup: "SET_SHOW_POPUP",
      setCurrentDialog: "SET_CURRENT_DIALOG",
    }),
    async toPage(name) {
      if (name == "myFeedback") {
        if (this.feedbackNum > 0) {
          // let params = {
          //   feedbackId: item.feedbackId,
          // };
          await this.$api.home.readStateUpdate({});
        }
      }
      this.$router.push({
        name,
      });
    },
    // 获取反馈数量
    async getNoReadFeedbackCount() {
      let res = await this.$api.home.getNoReadFeedbackCount({});
      if (res.code === 1) {
        this.feedbackNum = res.source;
      }
    },
    // 发送反馈
    async sendFeedBack() {
      let res = await this.$api.home.sendFeedBack(this.params);
      if (res.code === 1) {
        this.$message({
          message: "Successful",
          duration: "1500",
          type: "success",
        });
        this.params = {
          feedbackContent: "",
          email: "",
        };
      }
    },
    // 校验输入框
    checkSpecialKey(str) {
      if (str.trim() != "") {
        let specialKey =
          "[`~!@#$%^&*()_-=+|{}':;'\\[\\].<>《》/?~！#￥……&*（）——|{}【】‘；：”“'\"。，、？]‘'";
        for (let i = 0; i < str.length; i++) {
          if (specialKey.indexOf(str.substr(i, 1)) == -1) {
            return true;
          }
        }
        return false;
      } else {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.sendFeedBack {
  > header {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    > h2.title {
      font-size: 24px;
      font-family: Poppins-SemiBold, Poppins;
      font-weight: 600;
      color: #000000;
    }
    > .record {
      font-weight: 500;
      font-size: 16px;
      color: #e86472;
      position: relative;
      cursor: pointer;
      font-family: Poppins-Medium, Poppins;
      &.dot::after {
        content: "";
        width: 6px;
        height: 6px;
        position: absolute;
        top: -3px;
        right: -3px;
        border-radius: 3px;
        background: #e86472;
      }
    }
  }
  > .main {
    .feedback-text {
      margin-top: 45px;
      ::v-deep .el-textarea {
        font-size: 14px;
        .el-textarea__inner {
          padding: 15px 16px;
          line-height: 23px;
          border-radius: 8px;
          border-width: 2px;
          font-family: Poppins-Regular, Poppins;
          // &:focus {
          //   border-color: #e86472;
          // }
        }
      }
    }
    .feedback-email {
      margin-top: 32px;
      ::v-deep .el-input {
        font-size: 14px;
        .el-input__inner {
          width: 100%;
          height: 56px;
          font-family: Poppins-Regular, Poppins;
        }
      }
    }
    .toFacebookPage {
      display: block;
      margin-top: 38px;
      color: #e86472;
      font-size: 14px;
      text-decoration: underline;
      font-family: Poppins-Medium, Poppins;
      font-weight: 500;
      line-height: 23px;
    }
    .submit {
      width: 193px;
      height: 46px;
      display: block;
      margin: 168px auto;
      font-size: 20px;
      color: #ffffff;
      font-weight: 500;
      border-width: 0;
      background: linear-gradient(90deg, #ef6a59 0%, #e25177 100%);
      &.is-disabled {
        background: #999999;
      }
    }
  }
}
</style>
